<template>
    <div>
        <div class="skeleton-title" v-for="(item, i) in this.info.myTeamIncome">
            <div class="skeleton-title-img">
                <img :src="item.avatar" alt="">
            </div>
            <div class="skeleton-title-details">
                <p>{{item.nickname}}</p>
                <p>{{item.time}}</p>
            </div>
            <div class="skeleton-title-addmodel">
                +1模豆
            </div>
        </div>
    </div>

</template>

<script>
    import {myteaminfo} from '@/api/api';

    export default {
        name: "ModelReward",
        data() {
            return {
                info:{}
            }
        },
        created() {
            myteaminfo({}).then(res => {
                this.info = res.data.data
                console.log(this.info, 'asd')
            })
        }
    }
</script>

<style scoped>
    .skeleton-title {
        height: 70px;
        border-bottom: 1px solid #cccccc;
        display: flex;
        padding: 10px;
    }

    .skeleton-title-img {
        height: 50px;
        width: 50px;
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
    }

    .skeleton-title-img > img {
        width: 100%;
        height: 100%;
    }

    .skeleton-title-details {
        max-width: 60%;
        height: 50px;
        flex-grow: 10;
    }

    .skeleton-title-details > p {
        width: 100%;
        line-height: 25px;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .skeleton-title-details > p:nth-of-type(2) {
        font-size: 12px;
        color: #999999;
    }

    .skeleton-title-details > p:nth-of-type(1) {
        font-size: 18px;
        color: #333333;
    }

    .skeleton-title-addmodel {
        flex-grow: 1;
        line-height: 50px;
        color: rgb(226, 65, 106);
        text-align: right;
        font-size: 16px;
        padding-right: 10px;
    }

    .skeleton-content {
        height: 90px;
    }

    .skeleton-content > p {
        line-height: 30px;
        display: flex;
        justify-content: space-between
    }
</style>
